<template>
    <div class="top">
      <div class="dd">
          <div @click="biang(index)" :class="(cuntr==index?'liang':'')"
           v-for="(item,index) in list" :key="index">
           {{item}}
        </div>  
      </div>
      <!-- 订单列表 -->
      <div class="good">
        <div>
            <img src="../assets/redbox.png" alt="">
            <span class="name">纯手工水饺(凤城九路店) ></span>
            <span class="zhuangtai">已收到</span><br>
            <span class="juan">10减3</span>
            <span class="juan">10减3</span>
            <span class="juan">10减3</span>
        </div>
        <div class="img">
            <img src="../assets/redbox.png" alt="">
            <img src="../assets/redbox.png" alt="">
            <span class="price">￥17.8</span>
            <span class="number">共2件</span>
        </div>
        <div class="mai">再来一单</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
        return {
            list:['全部','待销费','待评价','退款'],
            cuntr:0
        }
    },
    methods:{
        biang(index){
            this.cuntr = index;
        }
    }
  }
  </script >
  
  <style scoped>
      .top{
        background-color: #f5f5f5;
        padding: 10px;
      }
    .top>.dd{
        display: flex;
    }
    .top>.dd>div{
        margin: 5px 15px;
        font-size:18px ; 
        padding-bottom: 7px; 
    }
    .top>.dd>.liang{
        font-weight: bold;
        border-bottom: 4px solid lightskyblue;
    }
    /* 订单列表 */
    .good{
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        position: relative;

    }
    .good>div>img{
        width: 35px;
        height: 35px;
        vertical-align: middle;
    }
    .good>div>.name{
        font-size: 20px;
        font-weight: bold;
    }
    .good>div>.zhuangtai{
        float: right;
    }
    .good>div>.juan{
        color: red;
        border: 1px solid red;
        border-radius: 4px;
        margin: 5px 10px 10px 0;
        padding: 0 5px;
    }
    .good>.img>img{
        width: 70px;
        height: 70px;
        margin-bottom: 40px;
    }
    .good>.img>.price{
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 80px;
        right: 20px;
    }
    .good>.img>.number{
        position: absolute;
        top: 105px;
        right: 20px;
    }
    .good>.mai{
        color: lightskyblue;
        border: 1px solid lightskyblue;
        border-radius: 15px;
        width: 75px;
        text-align: center;
        padding: 4px 6px;
        position: absolute;
        top: 140px;
        right: 20px;
    }
  </style>